<template>
  <div class="PageTools">
    <!-- 组题列表、学科、目录、标签、面试技巧公用头部导航栏 -->
    <!-- 第一行 -->
    <el-row type="flex" align="middle">
      <el-col :span="21">
        <el-row>
          <el-col :span="8">
            <el-form :inline="true">
              <el-form-item :label="label">
                <el-input></el-input>
              </el-form-item>
            </el-form>
          </el-col>
          <!-- 状态下拉框 -->
          <el-col v-if="showBefore" :span="8">
            <el-form :inline="true">
              <el-form-item label="状态">
                <el-select v-model="value" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </el-col>
          <!-- 清除搜索按钮 -->
          <el-col v-if="showAfter" :span="8">
            <el-button plain>清除</el-button>
            <el-button type="primary">搜索</el-button>
          </el-col>
        </el-row>
      </el-col>
      <!-- 第一行右边：组题列表此处是清除搜索按钮，学科、目录、标签、面试技巧是新增学科按钮 -->
      <!-- 父组件传值：:RowoneRight="true",则显示清除搜索按钮。:RowoneRight="false",则显示新增学科按钮 -->
      <el-col :span="3">
        <el-row type="flex" justify="end" align="middle">
          <el-col v-if="RowoneRight === true">
            <el-button plain>清除</el-button>
            <el-button type="primary">搜索</el-button>
          </el-col>
          <el-col v-else>
            <el-button type="success" @click="updateSubject"
              ><i class="el-icon-edit"></i>新增学科</el-button
            >
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <!-- 第二行：警告文案 -->
    <el-alert
    :title="'数据一共'+total+'条'"
    type="info"
    show-icon
    style="margin-bottom: 15px">
  </el-alert>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "启用",
        },
        {
          value: "选项2",
          label: "禁用",
        },
      ],
      value: "",

    };
  },
  props: {
    label: {
      type: String,
      required: true,
    },
    showBefore: {
      default: false,
      type: Boolean,
    },
    showAfter: {
      default: false,
      type: Boolean,
    },
    RowoneRight: {
      type: Boolean,
    },
    total:{
      type:Number,
    }
  },
  methods:{
    updateSubject(){
      this.$emit('updateSubject')
    }
  }
};
</script>

<style>
</style>